<template>
  <view class="tabs-container">
    <view
      class="tabs-item"
      v-for="(item, index) in list"
      :key="index"
      :class="{ 'active': activeIndex === index }"
      @click="setActive(index,item)"
    >
      {{ item.name }}
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

// 接收父组件传递的数据
const props = defineProps({
  list: {
    type: Array,
    required: true
  },
  activeIndex: {
    type: Number,
    default: 0
  }
});

// 触发事件通知父组件更新当前激活的索引
const emit = defineEmits(['update:activeIndex','tabClick']);

const setActive = (index,item) => {
  emit('update:activeIndex', index);
    emit('tabClick', { index, item });
}
</script>

<style lang="less" scoped>
.tabs-container {
  padding: 24rpx 0;
  display: flex;
  justify-content: space-between;
}
.tabs-item {
  font-family: PingFang SC;
  font-size: 32rpx;
  color: var(--maincolorf2);
}
.active {
  position: relative;
  color: var(--maincolorf1);
  font-weight: bold;
}
.active::before{
	content: '';
	position: absolute;
	bottom: -24rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background: var(--maincolorf1);
	border-radius: 2rpx;
}
</style>
